#diag_merge {
  background: #f5f5f5;
  min-height: 100vh;
  padding: 15px;
  .circle {
    background: #f5f5f5;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    content: "";
    display: block;
  }
  .body_header {
    position: relative;

    .title {
      position: absolute;
      color: #fff;
      top: 10%;
      font-size: 44px;
      left: 2%;
    }
  }
  .body {
    border-radius: 6px;
    margin: 20px 0;
    background: #fff;
    padding:  20px;
    width: 100%;
    box-sizing: border-box;
    padding-top: 0;
    overflow: hidden;
    box-sizing: border-box;
    .body_part {
      position: relative;
      padding: 20px 0;
      border-bottom: 1px dashed #cccccc;
      .title {
        font-weight: bold;
        font-size: 36px;
        margin-bottom: 15px;
        max-width: calc(100% - 100px);
      }
      ul {
        align-items: normal;
        width: 50%;
        flex-wrap: wrap;
        li {
          margin-bottom: 10px;
          margin-right: 15px;
          width: calc(50% - 15px);
          min-width: 300px;
          .name {
            margin-bottom: 10px;
            font-size: 18px;
            color: #4e4e4e;
          }
          .content {
            font-size: 24px;
            color: #2e2e2e;
          }
        }
      }
      .waterplink {
        position: absolute;
        right: 30px;
        top: 30px;
        width: 10%;
        min-width: 80px;
      }
    }

    .body_part2 {
      @extend .body_part;

      &::before {
        @extend .circle;
        left: 0;
        transform: translate(-100%, 50%);
      }
      &::after {
        @extend .circle;
        right: 0;
        transform: translate(100%, 50%);
      }
      .waterplink {
        position: absolute;
        right: 30px;
        top: 30px;
        width: 25%;
        min-width: 180px;
      }
    }
    .body_part3 {
      header {
        margin-top: 20px;
        margin-bottom: 15px;
        .title {
          font-weight: bold;
          font-size: 36px;
        }
        .subtitle {
          font-size: 24px;
          color: #1f1f1f;
          text-align: right;
          span {
            color: #ff0000;
          }
        }
      }
      ul {
        background: #f6f6f6;
        li {
          border-bottom: 1px solid #ededed;
          padding: 20px;
          &:last-child {
            border-bottom: none;
          }
          .title {
            color: #bb0f0f;
            font-size: 28px;
          }
          .context {
            color: #666666;
            font-size: 24px;
          }
        }
      }
    }
    .body_part4 {
      .body_title {
        margin-top: 20px;
        margin-bottom: 15px;
        font-weight: bold;
        font-size: 36px;
      }
      ul {
        li {
          margin-bottom: 10px;
          background: #f6f6f6;
          padding: 20px;
          &:last-child {
            margin-bottom: 0;
          }
          .title {
            color: inherit;
            font-size: 28px;
          }
          .context {
            font-size: 24px;
          }
        }
      }
    }
    .body_part5 {
      .title {
        margin-top: 20px;
        margin-bottom: 15px;
        font-weight: bold;
        font-size: 36px;
      }
      .table{
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        text-align: left;
        font-size: 28px;
        display: flex;
        white-space: nowrap;

        .table_column{
          flex: 1;
          min-width: calc(100% / 7);
          &:first-child{
            min-width: auto;
          }
          &:last-child{
            border-right: 1px solid #ededed;
          }
          div{
            box-sizing: border-box;
            color: #666666;
            padding:  0 20px;
            border-bottom: 1px solid #ededed;
            border-left: 1px solid #ededed;

            height: 80px;
            line-height: 80px;
            &:first-child{
              border-top: 1px solid #ededed;
              color: #000;
              background: #f6f6f6;
            }
          }
        }
        
      }
      // table {
      //   width: 100%;
      //   overflow-x: auto;
      //   text-align: left;
      //   font-size: 28px;
      //   display: block;
      //   thead {
      //     background: #f6f6f6;
      //     width: 100%;

      //     display: block;
      //   }

      //   th,
      //   td {
      //     display: inline-block;
      //     padding: 20px;
      //     min-width: calc(100% / 7);
      //   }
      // }
    }
  }
}
